<template>
  <div class="aoto">
    <el-row class="header_top">
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple  height_gao" >
          <el-date-picker
            v-model="value4"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions2" class="pic_css">
          </el-date-picker>
          <el-button type="danger" class="subang" @click="timeadd">确定</el-button>
        </div>
      </el-col>
      <el-col :span="12"  class="height_gao">
        <div class="grid-content bg-purple-light height_gao">
          <el-button type="success" class="allith2" @click="export2Excel">
            导出当页资金充值流水
          </el-button>

        </div>
      </el-col>
    </el-row>
    <div class="autd animated slideInRight">
      <el-table :data="datatitle" border style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中">
        <el-table-column prop="a" label="用户昵称" width="200">
        </el-table-column>
        <el-table-column prop="b" label="用户电话" width="180">
        </el-table-column>
        <el-table-column prop="c" label="充值方式" width="200">
        </el-table-column>
        <el-table-column prop="d" label="充值金额" width="200">
        </el-table-column>
        <el-table-column prop="e" label="充值时间" width="250">
        </el-table-column>
        <!--<el-table-column-->
          <!--fixed="right"-->
          <!--label="操作"-->
          <!--width="100">-->
          <!--<template slot-scope="scope">-->
            <!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
            <!--<el-button-->
              <!--@click.native.prevent="deleteRow(scope.$index, datatitle)"-->
              <!--type="text"-->
              <!--size="small">-->
              <!--移除-->
            <!--</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>

    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {

        pagesize: this.$store.state.attribute.page, //每页条数
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: false,
        Temporary: [{
          a: '1',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '2',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '3',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '4',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        },{
          a: '5',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '6',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '7',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '8',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        },{
          a: '9',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '10',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '11',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '12',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        },{
          a: '13',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '14',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '15',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }, {
          a: '16',
          b: '2',
          c: '3',
          d: '4',
          e: '5',
        }],  //总数据
        datatitle: [],  //当页数据
        value4: '',
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    methods: {
      handleClick(row){
          console.log(row);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      export2Excel() {
        var myDate = new Date();
//        let user_arr = [];
//        this.datatitle.forEach((item) => {
//          item.name = item.user_order.name;
//          user_arr.push(item);
//        });
        let header = ['用户昵称', '用户电话', '充值方式', '充值金额', '充值时间'];
        let val = ['a', 'b', 'c', 'd', 'e'];
        this.$h.exportexcel(header, val, this.datatitle, '资金充值流水' + myDate.toLocaleString())
      },

      handleCurrentChange(val) {
        this.cur = val;
        this.datatitle = this.Temporary.slice((val - 1) * this.pagesize, val * this.pagesize);
        // console.log(val)
      },
      timeadd() {  //时间查询
        this.loading2 = true;
        var start = this.value4[0];
        var End = this.value4[1];
        var statea = start.getMonth() + 1;
        var starttime = start.getFullYear() + '-' + (this.Appendzero(statea)) + '-' + this.Appendzero(start.getDate()) + ' ' + '00' + ':' + '00' + ':' + '00';
        var endstate = End.getMonth() + 1;
        var Endtime = End.getFullYear() + '-' + (this.Appendzero(endstate)) + '-' + this.Appendzero(End.getDate()) + ' ' + 23 + ':' + 59 + ':' + '59';
        var auttime = [starttime, Endtime];
        this.http.post({
          'api': '',
          'data': {
            "between_date": auttime
          }
        }).then(
          (res) => {
            var flag = this.status_code(res.data.status_code);
            if (flag == true) {
              this.shuju(res.data.Data);
            } else {
              this.$notify({
                title: flag,
                type: 'error'
              });
            }

          },
          (fas) => {

          })
      },
      Appendzero(obj) { //  日期 不够两位数 就在前面加一个0
        if (obj < 10) return "0" + "" + obj;
        else return obj;
      },
      bodyaudh() {

      },
      shuju() {
//        this.Temporary = dataall;
        this.loading2 = false;
        this.total = this.Temporary.length * 1; //数据总的条数
        this.currentPage4 = Math.ceil(this.total / this.pagesize); //总的条数 除 每页条数
        this.datatitle = this.Temporary.slice(0, this.pagesize);
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted() {
      this.shuju();
console.log(this.$store.state.attribute.page)
      //生命周期
    }
  }
</script>
<style scoped>
  .pic_css {
    height:45%;
    width: 60%;
    margin-top: 15px;
  }
.header_top{
  height:80px;
  width: 100%;
}
.allith2{
  background: #090404;
  float: right;
  margin-top: 15px;
}
.height_gao{
  height:80px;
}
  .subang {
    margin-left: 10%;
    width: 150px;
  }

  .el-row {
    /*margin-bottom: 20px;*/


  &:last-child {
    margin-bottom: 0;
  }

  }

  /*.el-col {*/
    /*border-radius: 4px;*/
  /*}*/

  /*.bg-purple-dark {*/
    /*!*background: #99a9bf;*!*/
  /*}*/

  /*.bg-purple {*/
    /*!*background: #d3dce6;*!*/
  /*}*/

  /*.bg-purple-light {*/
    /*!*background: #e5e9f2;*!*/
  /*}*/

  /*.grid-content {*/
    /*border-radius: 4px;*/
    /*min-height: 36px;*/
  /*}*/

  /*.row-bg {*/
    /*padding: 10px 0;*/
    /*background-color: #f9fafc;*/
  /*}*/
</style>
